<template>
  <div>
    <el-dialog
      title="预选详情"
      :visible="open"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="1200px"
      append-to-body
      @close="cancel()"
    >
      <el-form @submit.native.prevent ref="form" :model="form" :rules="rules" label-width="140px">
        <el-row>
          <el-col :span="8"
            ><el-form-item :label="`${$courseName?$courseName:'课程'}名称`" prop="chapterName">
              {{ form.chapterName }}
            </el-form-item></el-col
          >
          <el-col :span="8"
            ><el-form-item :label="`${$workstationName?$workstationName:'工作站'}名称`" prop="chapterName">
              {{ form.chapterName }}
            </el-form-item></el-col
          >
          <el-col :span="8"
            ><el-form-item :label="`${$workstationName?$workstationName:'工作站'}地址`" prop="chapterName">
              {{ form.chapterName }}
            </el-form-item></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="8"
            ><el-form-item label="类型" prop="chapterName">
              {{ form.chapterName }}
            </el-form-item></el-col
          >
          <el-col :span="8"
            ><el-form-item :label="`${$hourAmount?$hourAmount:'课时量'}`" prop="chapterName">
              {{ form.chapterName }}周
            </el-form-item></el-col
          >
          <el-col :span="8"
            ><el-form-item :label="`${$workstationName?$workstationName:'工作站'}可容纳学生`" prop="chapterName">
              {{ form.chapterName }}人
            </el-form-item></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="12"
            ><el-form-item :label="`添加${$gradeName?$gradeName:'班级'}/学生`" prop="add">
              <el-cascader
                style="width: 150px"
                size="small"
                :show-all-levels="false"
                :options="classes"
                :props="{
                  emitPath: false,
                  label: 'name',
                  value: 'id',
                  children: 'children',
                }"
                v-model="form.addclass"
                @change="cascaderChange($event, 'add')"
              ></el-cascader
              ><el-select
                style="width: 150px; margin-left: 5px"
                size="small"
                v-model="form.addstudnet"
                multiple
                collapse-tags
                placeholder="请选择"
                @change="selectChange($event, 'add')"
              >
                <el-option
                  key="all"
                  label="全选"
                  value="all"
                  @click.native="allclick('add')"
                ></el-option>
                <el-option
                  v-for="item in addstudnets"
                  :key="item.studentId"
                  :label="item.name"
                  :value="item.studentId"
                >
                </el-option> </el-select></el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item :label="`移除${$gradeName?$gradeName:'班级'}/学生`" prop="remove">
              <el-cascader
                style="width: 150px"
                size="small"
                :show-all-levels="false"
                :options="classes"
                :props="{
                  emitPath: false,
                  label: 'name',
                  value: 'id',
                  children: 'children',
                }"
                v-model="form.removeclass"
                @change="cascaderChange($event, 'remove')"
              ></el-cascader
              ><el-select
                style="width: 150px; margin-left: 5px"
                size="small"
                v-model="form.removestudnet"
                multiple
                collapse-tags
                placeholder="请选择"
                @change="selectChange($event, 'remove')"
              >
                <el-option
                  key="all"
                  label="全选"
                  value="all"
                  @click.native="allclick('remove')"
                ></el-option>
                <el-option
                  v-for="item in removestudnets"
                  :key="item.studentId"
                  :label="item.name"
                  :value="item.studentId"
                >
                </el-option> </el-select></el-form-item
          ></el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-preventReClick @click="cancel">取 消</el-button>
        <el-button v-preventReClick type="primary" @click="submitForm">确 定</el-button>

      </div>
    </el-dialog>
  </div>
</template>

<script>
import { json1api } from "@/api/json";
import { listPost_student } from "@/api/schoolOrganization/student";
import {
  addPost_workstation,
  updatePost_workstation,
  getPost_workstation,
} from "@/api/workstation/workstation";
export default {
  props: {
    open: Boolean,
    type: Number,
    id: Number,
  },
  data() {
    return {
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      classes: [],
      removestudnets: [],
      removestudnetsIds: [],
      addstudnets: [],
      addstudnetsIds: [],
    };
  },
  watch: {
    open(e) {
      if (e) {
        console.log("查询课程信息");
        //TODO 查询课程信息详情
        //   getPost_workstation(this.id).then((res) => {
        //     this.form = res.data;
        //   });
        //TODO 需要判断 是否学生为全部学生然后 显示全选
      }
    },
  },
  mounted() {
    // this.getClass();
  },
  methods: {
    allclick(type) {
      if (this.form[type + "studnet"].includes("all")) {
        this.form[type + "studnet"] = [];
      } else {
        this.form[type + "studnet"] = ["all", ...this[type + "studnetsIds"]];
      }
    },
    selectChange(e, type) {
      let arr = e.filter((item) => {
        return item != "all";
      });
      if (arr.length == this[type + "studnets"].length) {
        this.form[type + "studnet"].unshift("all");
      } else {
        this.form[type + "studnet"] = arr;
      }
    },
    cascaderChange(e, type) {
      listPost_student({ classId: e }).then((res) => {
        if (type == "add") {
          this.addstudnets = res.rows;
          this.addstudnetsIds = res.rows.map((item) => {
            return item.studentId;
          });
        } else {
          this.removestudnets = res.rows;
          this.removestudnetsIds = res.rows.map((item) => {
            return item.studentId;
          });
        }
      });
    },

    /* 获取面向对象 */
    getClass() {
      json1api(this.$store.getters.schoolId).then((res) => {
        res.data.map((item) => {
          item.id = "b" + item.branch_id;
          item.name = item.branch_name;
          item.children = item.majorList;
          delete item.majorList;
          delete item.branch_id;
          delete item.branch_name;
          item.children.map((item2) => {
            item2.id = "m" + item2.major_id;
            item2.name = item2.major_name;
            item2.children = item2.classList;
            delete item2.major_id;
            delete item2.major_name;
            delete item2.classList;
            item2.children.map((item3) => {
              item3.id = item3.class_id;
              item3.name = item3.class_name;
              delete item3.class_name;
              delete item3.class_id;
            });
          });
        });
        this.classes = res.data;
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          console.log(this.form);
          //TODO 调用预选详情操作接口
          // this.$modal.msgSuccess("操作成功");
          // this.$emit("refresh", true);
          // this.$emit("update:open", false);
        }
      });
    },
    // 表单重置
    reset() {
      this.form = {};
      this.resetForm("form");
    },
    cancel() {
      this.$emit("update:open", false);
      this.reset();
    },
  },
};
</script>
<style scoped lang="scss"></style>
